<template>
  <h1 class="row-title">折叠面板</h1>
  <div class="row">
    <ct-collapse v-model="openedValue1" @change="handlerSwitchChange">
      <ct-collapse-item name="a" title="home">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum exercitationem eius hic.
        Doloribus, fuga!
      </ct-collapse-item>
      <ct-collapse-item name="b" title="about" disabled>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum, porro aut. Id.
      </ct-collapse-item>
      <ct-collapse-item name="c" title="contact">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia reiciendis laborum
        explicabo nulla vel, corporis quam in voluptates sint consectetur distinctio! Cumque,
        exercitationem?
      </ct-collapse-item>
      <ct-collapse-item name="d" title="services">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint cupiditate ex.
      </ct-collapse-item>
    </ct-collapse>
  </div>
  <h1 class="row-title">手风琴效果</h1>
  <div class="row">
    <ct-collapse v-model="openedValue2" @change="handlerSwitchChange" accordion>
      <ct-collapse-item name="a" title="home">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum exercitationem eius hic.
        Doloribus, fuga!
      </ct-collapse-item>
      <ct-collapse-item name="b" title="about" disabled>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum, porro aut. Id.
      </ct-collapse-item>
      <ct-collapse-item name="c" title="contact">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia reiciendis laborum
        explicabo nulla vel, corporis quam in voluptates sint consectetur distinctio! Cumque,
        exercitationem?
      </ct-collapse-item>
      <ct-collapse-item name="d" title="services">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint cupiditate ex.
      </ct-collapse-item>
    </ct-collapse>
  </div>
  <h1 class="row-title">自定义标题</h1>
  <div class="row">
    <ct-collapse v-model="openedValue2" @change="handlerSwitchChange" accordion>
      <ct-collapse-item name="a">
        <template #title>
          <div>
            <ct-icon icon="home"></ct-icon>
            <span class="title">home</span>
          </div>
        </template>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum exercitationem eius hic.
        Doloribus, fuga!
      </ct-collapse-item>
      <ct-collapse-item name="b" title="about" disabled>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum, porro aut. Id.
      </ct-collapse-item>
      <ct-collapse-item name="c" title="contact">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia reiciendis laborum
        explicabo nulla vel, corporis quam in voluptates sint consectetur distinctio! Cumque,
        exercitationem?
      </ct-collapse-item>
      <ct-collapse-item name="d" title="services" disabled>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint cupiditate ex.
      </ct-collapse-item>
    </ct-collapse>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const openedValue1 = ref([])
const openedValue2 = ref([])
function handlerSwitchChange(value) {
  console.log(value)
}
</script>
<style lang="scss" scoped></style>
